<template>
	<view class="playing">
		<view class="">
			当前播放({{musicList.length}})
		</view>
		<scroll-view scroll-y="true" >
			<view v-for="(item,i) of musicList" :key="i" class="music-list" @click.stop="goSong(item,item.id)">
				<view class="music-item">
					<text class="name" :style="item.id===detail.id?'color:red':''">{{item.name}}</text>
					<text class="artists"  :style="item.id===detail.id?'color:red':''"> - {{artists[i]}}</text>
				</view>
				<view @click.stop="cutMusicList(i)">
					<uni-icons type="closeempty"></uni-icons>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex' //引入mapState
	export default {
		name:"playing",
		data() {
			return {
				
			};
		},
		computed:{
			...mapState(['detail', 'musicList','artists'])
		},
		methods:{
			...mapMutations(['setDetail','setArtistsName']),
			...mapActions(['getAudioSrc','cutMusicList','getLyric']),
			goSong(detail,songId){
				this.setDetail(detail)
				this.getAudioSrc(songId)
				this.getLyric(songId)
			}
		}
	}
</script>

<style lang="scss">
	.name {
		font-size: 28rpx;
		color: #3b4144;
	}
	
	.artists {
		font-size: 24rpx;
		color: #999;
	}
	.playing {
		height: 700rpx;
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
		margin: 30rpx 20rpx;
		background-color: #fff;
	
		.music-item {
			width: 500rpx;
			overflow: hidden;
			text-overflow: ellipsis;
	
			text {
				white-space: nowrap;
			}
		}
	
		.music-list {
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;
		}
	}
</style>